<template>
	<view class="container">
		<cu-custom isBack isFixed :scrollColor="scrollColor">
			<block slot="content">日常家居服务预约</block>
		</cu-custom>
		<image class="banner-bg" src="/static/img/vip.png" mode="aspectFill"></image>
		<view class="padding">
			<view class="flex relative">
				<button class="cu-btn round lg flex-sub serve-btn" @tap="showServeList">选择服务项目</button>
				<view class="serve-btn__reverse"></view>
			</view>
			<view class="flex justify-center margin-lg text-lg">
				<text>信息填写</text>
			</view>
			<form @submit="submit">
				<view class="from-group-item">
					<view class="title">姓名</view>
					<input class="input-view" type="text" 
						name="name" placeholder="请输入姓名"/>
				</view>
				<view class="from-group-item">
					<view class="title">联系方式</view>
					<input class="input-view" type="number" 
						name="mobile" placeholder="请输入联系方式"/>
				</view>
				<view class="from-group-item">
					<view class="title">所在区域</view>
					<input class="input-view input-area" type="text" disabled
						v-model="area" placeholder="获取定位" placeholder-class="text-green"
						@tap="chooseAddress"/>
				</view>
				<view class="from-group-item">
					<view class="title">详细地址</view>
					<input class="input-view" type="text" 
						name="address" placeholder="请输入详细地址"/>
				</view>
				<view class="serve-item" v-for="(serve, index) in tmpServes" :key="index">
					<view class="checked-icon" @tap="cancelServe(index)">
						<uni-icons type="checkmarkempty" color="rgb(0, 123, 70)" size="12"></uni-icons>
					</view>
					<view class="margin-left">
						<view class="text-green text-lg">
							{{serve.name}}
						</view>
						<view class="margin-top-xs text-gray">
							材料+人工
						</view>
					</view>
				</view>
				<view class="margin-tb text-gray text-sm padding-xs">
					预约提交后，15分钟内将会有工作人员与您联系，请保持通讯畅通，注意接听噢！
				</view>
				<view class="flex margin-top-xl">
					<button class="cu-btn bg-green flex-sub round lg" form-type="submit">提交预约</button>
				</view>
			</form>
		</view>
		
		<view class="cu-modal bottom-modal" :class="modalName=='serve'?'show':''">
			<view class="cu-dialog radius-top-sm">
				<view class="header-box padding">
					<view class="search-box">
						<input class="search-input" type="text" v-model="keyword" placeholder="请输入服务项目名搜索"/>
						<button class="cu-btn bg-green lg">搜索</button>
					</view>
					<view class="close-btn" @tap="hideModal">
						<uni-icons type="closeempty" color="#999" size="20"></uni-icons>
					</view>
				</view>
				<view class="flex flex-wrap padding-lr margin-bottom cu-tag-box">
					<view class="cu-tag lg bg-green light radius" 
						v-for="(serve, index) in tmpServes" :key="index">
						<text class="margin-right-xs">{{serve.name}}</text>
						<view class="" @tap="cancelServe(index)">
							<uni-icons type="closeempty" color="rgb(0, 123, 70)" size="16"></uni-icons>
						</view>
					</view>
				</view>
				<scroll-view class="serve-list padding-lr" scroll-y>
					<view class="serve-item" v-for="(serve, index) in serves" :key="index"
						@tap="selectServe(serve)">
						<view v-if="tmpServes.find(e => serve.id==e.id)" class="checked-icon">
							<uni-icons type="checkmarkempty" color="rgb(0, 123, 70)" size="12"></uni-icons>
						</view>
						<view v-else class="check-icon">
							
						</view>
						<view class="margin-left">
							<view class="">
								<text class="text-green text-lg">{{serve.name}}</text>
								<text class="text-gray margin-left">材料+人工</text>
							</view>
							<view class="margin-top-xs text-left text-lg text-gray">
								<text class="text-price text-red">40.00</text>
								<text>元/处 起</text>
							</view>
						</view>
					</view>
				</scroll-view>
				<view class="flex margin-top-xl margin-lr padding-bottom-xs">
					<button class="cu-btn bg-green flex-sub lg round" @tap="hideModal">确认选择</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				CustomBar: this.CustomBar,
				scrollColor: 'rgba(255, 255, 255, 0)',
				area: '',
				lat: '',
				lng: '',
				keyword: '',
				serves: [{
					id: 0,
					name: "门边打胶"
				},{
					id: 1,
					name: "窗边打胶"
				},{
					id: 2,
					name: "马桶打胶"
				},{
					id: 3,
					name: "隔断打胶"
				},{
					id: 4,
					name: "灯具安装"
				},{
					id: 5,
					name: "换门吸"
				},{
					id: 6,
					name: "挂画"
				},{
					id: 7,
					name: "墙面钻孔"
				},{
					id: 8,
					name: "瓷砖补勾缝"
				},{
					id: 9,
					name: "换角阀"
				},{
					id: 10,
					name: "换马桶密封圈"
				},{
					id: 11,
					name: "换开关面板"
				},{
					id: 12,
					name: "墙面局部点补"
				}],
				tmpServes: [{
					id: 0,
					name: "门边打胶"
				}],
				modalName: ''
			}
		},
		methods: {
			chooseAddress() {
				uni.chooseLocation({
					success: res => {
						this.area = res.name
						this.lat = res.latitude
						this.lng = res.longitude
					}
				})
			},
			showServeList() {
				this.modalName = 'serve'
			},
			hideModal() {
				this.modalName = ''
			},
			cancelServe(index) {
				this.tmpServes.splice(index, 1)
			},
			selectServe(serve) {
				let index = this.tmpServes.findIndex(e => serve.id==e.id)
				if(index == -1) {
					if(this.tmpServes.length >= 10) {
						return this.$tools.msg("最多同时选择10项服务")
					}
					this.tmpServes.push(serve)
				} else {
					this.tmpServes.splice(index, 1)
				}
			},
			submit(e) {
				console.log(e)
			}
		},
		onPageScroll(e) {
			let scrollTop = e.scrollTop
			let opacity = (scrollTop/100)>1?1:(scrollTop/100)
			this.scrollColor = `rgba(255, 255, 255, ${opacity})`
		}
	}
</script>

<style scoped>
	.container {
		background-color: #fff;
	}
	.banner-bg {
		width: 100%;
		height: 850rpx;
		background-color: rgb(0, 123, 70);
		box-sizing: content-box;
	}
	.serve-btn {
		position: relative;
		color: #fff;
		font-size: 34rpx;
		background-image: linear-gradient(45deg, rgb(255, 225, 104), rgb(255, 134, 55), rgb(255, 163, 60));
		z-index: 99;
	}
	.serve-btn__reverse {
		position: absolute;
		top: -6rpx;
		bottom: -6rpx;
		left: -6rpx;
		right: -6rpx;
		border-radius: 999999rpx;
		background-image: linear-gradient(45deg, rgb(255, 163, 60), rgb(255, 134, 55), rgb(255, 225, 104));
	}
	
	.from-group-item {
		display: flex;
		align-items: center;
		background-color: rgb(239, 239, 239);
		padding: 20rpx 30rpx;
		border-radius: 10rpx;
		font-size: 30rpx;
	}
	.from-group-item + .from-group-item {
		margin-top: 30rpx;
	}
	.from-group-item .title {
		min-width: 200rpx;
		margin-right: 20rpx;
	}
	.input-view {
		flex: 1;
		text-align: right;
		font-size: 30rpx;
	}
	.serve-item {
		background-color: #fff;
		padding: 30rpx;
		box-shadow: 2rpx 2rpx 4rpx 4rpx rgba(0, 0, 0, .1);
		border-radius: 20rpx;
		margin: 30rpx 0;
		display: flex;
		align-items: flex-start;
	}
	.checked-icon {
		margin-top: 4rpx;
		width: 30rpx;
		height: 30rpx;
		border: 2rpx solid rgb(0, 123, 70);
		border-radius: 10rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.check-icon {
		margin-top: 4rpx;
		width: 30rpx;
		height: 30rpx;
		border: 2rpx solid rgb(60, 60, 60);
		border-radius: 10rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.cu-modal.bottom-modal .cu-dialog.radius-top-sm {
	    border-top-left-radius: 20rpx;
	    border-top-right-radius: 20rpx;
	}
	.header-box {
		display: flex;
	}
	.search-box {
		display: flex;
		align-items: center;
		height: 80rpx;
		border: 2rpx solid rgb(0, 123, 70);
		border-radius: 10rpx;
		flex: 1;
	}
	.search-input {
		flex: 1;
		height: inherit;
		padding: 0 30rpx;
		text-align: left;
	}
	.close-btn {
		width: 60rpx;
		height: 60rpx;
		display: flex;
		justify-content: flex-end;
	}
	.serve-list {
		max-height: 50vh;
	}
	.serve-list .serve-item {
		background-color: transparent;
		box-shadow: none;
		margin: 0;
		padding: 0;
	}
	.serve-list .serve-item + .serve-item {
		margin-top: 60rpx;
	}
	.cu-tag-box {
		gap: 20rpx;
	}
	.cu-tag-box .cu-tag {
		margin: 0;
	}
</style>